<template>
  <div id="login">
    <div id="bgd">
      <div class="logo_DIv">
        <img src="@/assets/images/loginLogo.png" alt class="logoLogo" />
      </div>

      <canvas id="myCanvas" :width="width" :height="height"></canvas>
    </div>

    <div id="loginBox">
      <h4>登录</h4>
      <el-form
        @submit.native.prevent="submit"
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="0px"
      >
        <el-form-item label prop="userName" style="margin-top:40px;">
          <el-row>
            <!-- <el-col :span="2">
              <span class="iconfont">&#xe654;</span>
            </el-col>-->
            <el-col :span="24">
              <el-input
                class="inps"
                placeholder="用户名"
                prefix-icon="el-icon-user-solid"
                v-model="loginForm.userName"
                type="text"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label prop="password">
          <el-row>
            <!-- <el-col :span="2">
              <span class="iconfont">&#xe616;</span>
            </el-col>-->
            <el-col :span="24">
              <el-input
                class="inps"
                placeholder="密码"
                prefix-icon="el-icon-lock"
                type="password"
                show-password
                v-model="loginForm.password"
                :key="passwordType"
              ></el-input>
            </el-col>
            <!-- <el-col :span="2">
              <span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
                <span
                  class="iconfont show-pwd"
                  :class="passwordType === 'password' ? 'icon-close' : 'icon-open'"
                ></span>
              </span>
            </el-col>-->
          </el-row>
        </el-form-item>
        <el-form-item label prop="code">
          <el-row :gutter="10" type="flex" align="center">
            <!-- <el-col :span="2">
              <span class="iconfont">&#xe616;</span>
            </el-col>-->
            <el-col :span="14">
              <el-input class="inps" type="text" placeholder="验证码" v-model="loginForm.code"></el-input>
            </el-col>
            <el-col :span="10">
              <!-- <img @click="getImage" :src="imgSrc" class="codeImg" /> -->
              <v-sidentify style="margin-top:6px" :identifyCode="identifyCode" @change="changeCode"></v-sidentify>
              <!-- <el-input type="text" placeholder="点击刷新" readonly></el-input> -->
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-button class="my-button submitBtn" round @click="submit" type="primary">登录</el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="my-button submitBtn" round type="primary" @click="reset">重置</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Sidentify from "@/components/Sidentify";
export default {
  components: {
    "v-sidentify": Sidentify,
  },
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: "",
      passwordType: "password",
      canvas: null,
      context: null,
      stars: [], //星星数组
      shadowColorList: [
        "#39f",
        "#ec5707",
        "#b031d4",
        "#22e6c7",
        "#92d819",
        "#14d7f1",
        "#e23c66",
      ], //阴影颜色列表
      directionList: ["leftTop", "leftBottom", "rightTop", "rightBottom"], //星星运行方向
      speed: 50, //星星运行速度
      last_star_created_time: new Date(), //上次重绘星星时间
      Ball: class Ball {
        constructor(radius) {
          this.x = 0;
          this.y = 0;
          this.radius = radius;
          this.color = "";
          this.shadowColor = "";
          this.direction = "";
        }

        draw(context) {
          context.save();
          context.translate(this.x, this.y);
          context.lineWidth = this.lineWidth;
          var my_gradient = context.createLinearGradient(0, 0, 0, 8);
          my_gradient.addColorStop(0, this.color);
          my_gradient.addColorStop(1, this.shadowColor);
          context.fillStyle = my_gradient;
          context.beginPath();
          context.arc(0, 0, this.radius, 0, Math.PI * 2, true);
          context.closePath();

          context.shadowColor = this.shadowColor;
          context.shadowOffsetX = 0;
          context.shadowOffsetY = 0;
          context.shadowBlur = 10;

          context.fill();
          context.restore();
        }
      }, //工厂模式定义Ball类
      width: window.innerWidth,
      height: window.innerHeight,
      loginForm: {
        userName: "",
        password: "",
        code: "",
      },
      rules: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [
          {
            required: true,
            trigger: "change",
            message: "请输入验证码",
          },
        ],
      },
      imgSrc: "http://localhost:8083/api/user/image",
      // imgSrc: "http://120.25.157.203:8083/api/user/image",

      // imgSrc:
      //   "https://dummyimage.com/200%20x%20100/f2d079/fff.png&text=huynbrb",
    };
  },
  methods: {
    //重置
    reset() {
      this.loginForm.userName = "";
      this.loginForm.password = "";
      this.loginForm.code = "";
    },
    //提交登录
    async submit() {
      const _this = this;
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          // console.log(valid)
          //菜单验证成功后，我们要进行用户认证，需要将用户名和密码以及验证码传输给服务器进行认证。
          // console.log("这是获取的密码" + _this.loginForm.password);
          if (this.loginForm.code == "") {
            _this.$message.error("请输入验证码");

            return;
          }
          if (this.identifyCode !== this.loginForm.code) {
            this.code = "";
            // this.refreshCode();
            _this.$message.error("请输入正确的验证码");

            return;
          }
          let datafor = new FormData();
          datafor.append("username", _this.loginForm.userName);
          datafor.append("password", _this.loginForm.password);
          datafor.append("code", _this.loginForm.code);
          let { data: res } = await _this.$http.post(
            "/api/user/login",
            datafor
          );
          // console.log(res);
          if (res.code != 200) {
            _this.$message.error(res.msg);
            this.refreshCode();

            return;
          }
          _this.$message.success(res.msg);
          // //模拟从后台数据库中获得菜单数据和路由数据
          // //菜单数据
          let token = res.data.token;
          // let token = "asdsadsadsasd";

          let menuList = res.data.menuList;
          let userId = res.data.userId;
          let routerList = res.data.routerList;
          let auths = res.data.auth;
          // let userId = 1;
          console.log(menuList);
          // let menuList1 = [
          //   {
          //     children: [
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:clientDetail",
          //             createTime: 1595926228000,
          //             icon: "el-icon-document",
          //             id: 3,
          //             isHome: "0",
          //             label: "客户详情",
          //             name: "clientDetail",
          //             orderNum: 1,
          //             parentId: 2,
          //             path: "/clientDetail",
          //             type: 1,
          //             updateTime: 1595926228000,
          //             url: "/client/ClientManage/ClientDetail",
          //           },
          //           {
          //             children: [],
          //             code: "sys:clientList",
          //             createTime: 1595926228000,
          //             icon: "el-icon-document",
          //             id: 44,
          //             isHome: "0",
          //             label: "客户列表",
          //             name: "clientList",
          //             orderNum: 1,
          //             parentId: 2,
          //             path: "/clientList",
          //             type: 1,
          //             updateTime: 1595926228000,
          //             url: "/client/ClientManage/ClientList",
          //           },
          //           {
          //             children: [],
          //             code: "sys:clientAdd",
          //             createTime: 1595927478000,
          //             icon: "el-icon-document",
          //             id: 4,
          //             isHome: "0",
          //             label: "添加用户",
          //             name: "clinetAdd",
          //             orderNum: 2,
          //             parentId: 2,
          //             path: "/clientAdd",
          //             type: 1,
          //             updateTime: 1595927478000,
          //             url: "/client/ClientManage/ClientAdd",
          //           },
          //         ],
          //         code: "sys:clientManage",
          //         createTime: 1595926113000,
          //         icon: "el-icon-document",
          //         id: 2,
          //         isHome: "0",
          //         label: "客户管理",
          //         name: "clientList",
          //         orderNum: 1,
          //         parentId: 1,
          //         path: "/clientList",
          //         type: 0,
          //         updateTime: 1595926113000,
          //         url: "",
          //       },
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:orderDetail",
          //             createTime: 1595927671000,
          //             icon: "el-icon-document",
          //             id: 6,
          //             isHome: "0",
          //             label: "订单详情",
          //             name: "orderDetail",
          //             orderNum: 1,
          //             parentId: 5,
          //             path: "/orderDetail",
          //             type: 1,
          //             updateTime: 1595927671000,
          //             url: "/client/OrderManage/OrderDetail",
          //           },
          //           {
          //             children: [],
          //             code: "sys:orderAdd",
          //             createTime: 1595927745000,
          //             icon: "el-icon-document",
          //             id: 7,
          //             isHome: "0",
          //             label: "添加订单",
          //             name: "orderAdd",
          //             orderNum: 2,
          //             parentId: 5,
          //             path: "/orderAdd",
          //             type: 1,
          //             updateTime: 1595927745000,
          //             url: "/client/OrderManage/OrderAdd",
          //           },
          //           {
          //             children: [],
          //             code: "sys:orderDelete",
          //             createTime: 1595927829000,
          //             icon: "el-icon-document",
          //             id: 8,
          //             isHome: "0",
          //             label: "撤销订单",
          //             name: "orderDelete",
          //             orderNum: 3,
          //             parentId: 5,
          //             path: "/orderDelete",
          //             type: 1,
          //             updateTime: 1595927829000,
          //             url: "/client/OrderManage/OrderDelete",
          //           },
          //           {
          //             children: [],
          //             code: "sys:orderExchange",
          //             createTime: 1595927917000,
          //             icon: "el-icon-document",
          //             id: 9,
          //             isHome: "0",
          //             label: "换货订单",
          //             name: "orderExchange",
          //             orderNum: 4,
          //             parentId: 5,
          //             path: "/orderExchange",
          //             type: 1,
          //             updateTime: 1595927917000,
          //             url: "/client/OrderManage/OrderExchange",
          //           },
          //           {
          //             children: [],
          //             code: "sys:orderUpdate",
          //             createTime: 1595927962000,
          //             icon: "el-icon-document",
          //             id: 10,
          //             isHome: "0",
          //             label: "退货订单",
          //             name: "orderUpdate",
          //             orderNum: 5,
          //             parentId: 5,
          //             path: "/orderUpdate",
          //             type: 1,
          //             updateTime: 1595927962000,
          //             url: "/client/OrderManage/OrderUpdate",
          //           },
          //         ],
          //         code: "sys:orderManage",
          //         createTime: 1595927560000,
          //         icon: "el-icon-document",
          //         id: 5,
          //         isHome: "0",
          //         label: "订单管理",
          //         name: "orderList",
          //         orderNum: 2,
          //         parentId: 1,
          //         path: "/orderList",
          //         type: 0,
          //         updateTime: 1595927560000,
          //         url: "",
          //       },
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:operatorDetail",
          //             createTime: 1595928241000,
          //             icon: "el-icon-document",
          //             id: 12,
          //             isHome: "0",
          //             label: "操作员列表",
          //             name: "operatorDetail",
          //             orderNum: 0,
          //             parentId: 11,
          //             path: "/operatorDetail",
          //             type: 1,
          //             updateTime: 1595928241000,
          //             url: "/client/OperatorManage/OperatorDetail",
          //           },
          //           {
          //             children: [],
          //             code: "sys:managerview",
          //             createTime: 1595928241000,
          //             icon: "el-icon-document",
          //             id: 45,
          //             isHome: "0",
          //             label: "操作员详情",
          //             name: "managerview",
          //             orderNum: 0,
          //             parentId: 11,
          //             path: "/managerview",
          //             type: 1,
          //             updateTime: 1595928241000,
          //             url: "/client/OperatorManage/Managerview",
          //           },
          //         ],
          //         code: "sys:operatorManage",
          //         createTime: 1595928131000,
          //         icon: "el-icon-document",
          //         id: 11,
          //         isHome: "0",
          //         label: "操作员管理",
          //         name: "operatorList",
          //         orderNum: 3,
          //         parentId: 1,
          //         path: "/operatorList",
          //         type: 0,
          //         updateTime: 1595928131000,
          //         url: "",
          //       },
          //     ],
          //     code: "sys:client",
          //     createTime: 1595925629000,
          //     icon: "el-icon-document",
          //     id: 1,
          //     isHome: "0",
          //     label: "客户服务中心",
          //     name: "",
          //     orderNum: 1,
          //     parentId: 0,
          //     path: "/client",
          //     type: 0,
          //     updateTime: 1595925629000,
          //     url: "",
          //   },
          //   {
          //     children: [
          //       {
          //         children: [],
          //         code: "sys:schedulingManage",
          //         createTime: 1595928677000,
          //         icon: "el-icon-rank",
          //         id: 14,
          //         isHome: "0",
          //         label: "调度管理",
          //         name: "schedulingManage",
          //         orderNum: 1,
          //         parentId: 13,
          //         path: "/schedulingManage",
          //         type: 1,
          //         updateTime: 1595928677000,
          //         url: "/scheduling/SchedulingManage/Index",
          //       },
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:assignments",
          //             createTime: 1595928861000,
          //             icon: "el-icon-rank",
          //             id: 16,
          //             isHome: "0",
          //             label: "分配送货任务",
          //             name: "assignments",
          //             orderNum: 1,
          //             parentId: 15,
          //             path: "/assignments",
          //             type: 1,
          //             updateTime: 1595928861000,
          //             url: "/scheduling/DeliveryManage/Assignments",
          //           },
          //           {
          //             children: [],
          //             code: "sys:signReceipt",
          //             createTime: 1595928939000,
          //             icon: "el-icon-rank",
          //             id: 17,
          //             isHome: "0",
          //             label: "补打签收单",
          //             name: "signReceipt",
          //             orderNum: 2,
          //             parentId: 15,
          //             path: "/signReceipt",
          //             type: 1,
          //             updateTime: 1595928939000,
          //             url: "/scheduling/DeliveryManage/SignReceipt",
          //           },
          //           {
          //             children: [],
          //             code: "sys:receiptEntry",
          //             createTime: 1595929034000,
          //             icon: "el-icon-rank",
          //             id: 18,
          //             isHome: "0",
          //             label: "回执录入",
          //             name: "receiptEntry",
          //             orderNum: 3,
          //             parentId: 15,
          //             path: "/receiptEntry",
          //             type: 1,
          //             updateTime: 1595929034000,
          //             url: "/scheduling/DeliveryManage/ReceiptEntry",
          //           },
          //           {
          //             children: [],
          //             code: "sys:payment",
          //             createTime: 1595929130000,
          //             icon: "el-icon-rank",
          //             id: 19,
          //             isHome: "0",
          //             label: "缴款查询",
          //             name: "payment",
          //             orderNum: 4,
          //             parentId: 15,
          //             path: "/payment",
          //             type: 1,
          //             updateTime: 1595929130000,
          //             url: "/scheduling/DeliveryManage/Payment",
          //           },
          //         ],
          //         code: "sys:deliveryManage",
          //         createTime: 1595928765000,
          //         icon: "el-icon-rank",
          //         id: 15,
          //         isHome: "0",
          //         label: "配送管理",
          //         name: "deliveryManage",
          //         orderNum: 2,
          //         parentId: 13,
          //         path: "/deliveryManage",
          //         type: 0,
          //         updateTime: 1595928765000,
          //         url: "",
          //       },
          //     ],
          //     code: "sys:scheduling",
          //     createTime: 1595928517000,
          //     icon: "el-icon-rank",
          //     id: 13,
          //     isHome: "0",
          //     label: "调度中心",
          //     name: "",
          //     orderNum: 2,
          //     parentId: 0,
          //     path: "/scheduling",
          //     type: 0,
          //     updateTime: 1595928517000,
          //     url: "",
          //   },
          //   {
          //     children: [
          //       {
          //         children: [],
          //         code: "sys;purchaseStorage",
          //         createTime: 1595930015000,
          //         icon: "el-icon-s-operation",
          //         id: 21,
          //         isHome: "0",
          //         label: "购货入库",
          //         name: "purchaseStorage",
          //         orderNum: 1,
          //         parentId: 20,
          //         path: "/purchaseStorage",
          //         type: 1,
          //         updateTime: 1595930015000,
          //         url: "/warehouse/PurchaseStorage/Index",
          //       },
          //       {
          //         children: [],
          //         code: "sys:pickUpManage",
          //         createTime: 1595930104000,
          //         icon: "el-icon-s-operation",
          //         id: 22,
          //         isHome: "0",
          //         label: "领货管理",
          //         name: "pickUpManage",
          //         orderNum: 2,
          //         parentId: 20,
          //         path: "/pickUpManage",
          //         type: 1,
          //         updateTime: 1595930104000,
          //         url: "/warehouse/PickUpManage/Index",
          //       },
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:returnSign",
          //             createTime: 1595930281000,
          //             icon: "el-icon-s-operation",
          //             id: 24,
          //             isHome: "0",
          //             label: "退货登记",
          //             name: "returnSign",
          //             orderNum: 1,
          //             parentId: 23,
          //             path: "/returnSign",
          //             type: 1,
          //             updateTime: 1595930281000,
          //             url: "/warehouse/ReturnManage/ReturnSign",
          //           },
          //           {
          //             children: [],
          //             code: "sys:returnOutOfStock",
          //             createTime: 1595930415000,
          //             icon: "el-icon-s-operation",
          //             id: 25,
          //             isHome: "0",
          //             label: "退货出库",
          //             name: "returnOutOfStock",
          //             orderNum: 2,
          //             parentId: 23,
          //             path: "/returnOutOfStock",
          //             type: 1,
          //             updateTime: 1595930415000,
          //             url: "/warehouse/ReturnManage/ReturnOutOfStock",
          //           },
          //         ],
          //         code: "sys:returnManage",
          //         createTime: 1595930220000,
          //         icon: "el-icon-s-operation",
          //         id: 23,
          //         isHome: "0",
          //         label: "退货管理",
          //         name: "returnManage",
          //         orderNum: 3,
          //         parentId: 20,
          //         path: "/returnManage",
          //         type: 0,
          //         updateTime: 1595930220000,
          //         url: "",
          //       },
          //     ],
          //     code: "sys:warehouse",
          //     createTime: 1595929903000,
          //     icon: "el-icon-s-operation",
          //     id: 20,
          //     isHome: "0",
          //     label: "库房管理",
          //     name: "",
          //     orderNum: 3,
          //     parentId: 0,
          //     path: "/warehouse",
          //     type: 0,
          //     updateTime: 1595929903000,
          //     url: "",
          //   },
          //   {
          //     children: [
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:firstClassifyManage",
          //             createTime: 1595931493000,
          //             icon: "el-icon-receiving",
          //             id: 28,
          //             isHome: "0",
          //             label: "一级分类管理",
          //             name: "firstClassifyManage",
          //             orderNum: 1,
          //             parentId: 27,
          //             path: "/firstClassifyManage",
          //             type: 1,
          //             updateTime: 1595931493000,
          //             url: "/delivery/Commodity/FirstClassifyManage",
          //           },
          //           {
          //             children: [],
          //             code: "sys:secondClassifyManage",
          //             createTime: 1595931527000,
          //             icon: "el-icon-receiving",
          //             id: 29,
          //             isHome: "0",
          //             label: "二级分类管理",
          //             name: "secondClassifyManage",
          //             orderNum: 2,
          //             parentId: 27,
          //             path: "/secondClassifyManage",
          //             type: 1,
          //             updateTime: 1595931527000,
          //             url: "/delivery/Commodity/SecondClassifyManage",
          //           },
          //           {
          //             children: [],
          //             code: "sys:commodityManage",
          //             createTime: 1595931664000,
          //             icon: "el-icon-receiving",
          //             id: 30,
          //             isHome: "0",
          //             label: "商品管理",
          //             name: "commodityManage",
          //             orderNum: 3,
          //             parentId: 27,
          //             path: "/commodityManage",
          //             type: 1,
          //             updateTime: 1595931664000,
          //             url: "/delivery/Commodity/CommodityManage",
          //           },
          //         ],
          //         code: "sys:commodity",
          //         createTime: 1595931396000,
          //         icon: "el-icon-receiving",
          //         id: 27,
          //         isHome: "0",
          //         label: "商品管理",
          //         name: "commodity",
          //         orderNum: 1,
          //         parentId: 26,
          //         path: "/commodity",
          //         type: 0,
          //         updateTime: 1595931396000,
          //         url: "",
          //       },
          //       {
          //         children: [
          //           {
          //             children: [],
          //             code: "sys:warehouseSetting",
          //             createTime: 1595931933000,
          //             icon: "el-icon-receiving",
          //             id: 32,
          //             isHome: "0",
          //             label: "库房设置",
          //             name: "warehouseSetting",
          //             orderNum: 1,
          //             parentId: 31,
          //             path: "/warehouseSetting",
          //             type: 1,
          //             updateTime: 1595931933000,
          //             url: "/delivery/WarehouseManage/WarehouseSetting",
          //           },
          //           {
          //             children: [],
          //             code: "sys:inventory",
          //             createTime: 1595932040000,
          //             icon: "el-icon-receiving",
          //             id: 33,
          //             isHome: "0",
          //             label: "库存量查询",
          //             name: "inventory",
          //             orderNum: 2,
          //             parentId: 31,
          //             path: "/inventory",
          //             type: 1,
          //             updateTime: 1595932040000,
          //             url: "/delivery/WarehouseManage/Inventory",
          //           },
          //           {
          //             children: [],
          //             code: "sys:warehouseInventorySetting",
          //             createTime: 1595932165000,
          //             icon: "el-icon-receiving",
          //             id: 34,
          //             isHome: "0",
          //             label: "库房储备设置",
          //             name: "warehouseInventorySetting",
          //             orderNum: 3,
          //             parentId: 31,
          //             path: "/warehouseInventorySetting",
          //             type: 1,
          //             updateTime: 1595932165000,
          //             url:
          //               "/delivery/WarehouseManage/WarehouseInventorySetting",
          //           },
          //           {
          //             children: [],
          //             code: "sys:accessOrder",
          //             createTime: 1595932249000,
          //             icon: "el-icon-receiving",
          //             id: 35,
          //             isHome: "0",
          //             label: "出入单查询",
          //             name: "accessOrder",
          //             orderNum: 4,
          //             parentId: 31,
          //             path: "/accessOrder",
          //             type: 1,
          //             updateTime: 1595932249000,
          //             url: "/delivery/WarehouseManage/AccessOrder",
          //           },
          //         ],
          //         code: "sys:warehouseManage",
          //         createTime: 1595931838000,
          //         icon: "el-icon-receiving",
          //         id: 31,
          //         isHome: "0",
          //         label: "中心库房",
          //         name: "warehouseManage",
          //         orderNum: 2,
          //         parentId: 26,
          //         path: "/warehouseManage",
          //         type: 0,
          //         updateTime: 1595931838000,
          //         url: "",
          //       },
          //       {
          //         children: [],
          //         code: "sys:supplier",
          //         createTime: 1595932342000,
          //         icon: "el-icon-receiving",
          //         id: 36,
          //         isHome: "0",
          //         label: "供应商管理",
          //         name: "supplier",
          //         orderNum: 3,
          //         parentId: 26,
          //         path: "/supplier",
          //         type: 1,
          //         updateTime: 1595932342000,
          //         url: "/delivery/Supplier/Index",
          //       },
          //       {
          //         children: [],
          //         code: "sys:purchaseManage",
          //         createTime: 1595932453000,
          //         icon: "el-icon-receiving",
          //         id: 37,
          //         isHome: "0",
          //         label: "进货",
          //         name: "purchase",
          //         orderNum: 4,
          //         parentId: 26,
          //         path: "/purchase",
          //         type: 1,
          //         updateTime: 1595932453000,
          //         url: "/delivery/Purchase/Index",
          //       },
          //       {
          //         children: [],
          //         code: "sys:return",
          //         createTime: 1595932560000,
          //         icon: "el-icon-receiving",
          //         id: 38,
          //         isHome: "0",
          //         label: "退货",
          //         name: "return",
          //         orderNum: 5,
          //         parentId: 26,
          //         path: "/return",
          //         type: 1,
          //         updateTime: 1595932560000,
          //         url: "/delivery/Return/Index",
          //       },
          //       {
          //         children: [],
          //         code: "sys:business",
          //         createTime: 1595932803000,
          //         icon: "el-icon-receiving",
          //         id: 39,
          //         isHome: "0",
          //         label: "业务管理",
          //         name: "business",
          //         orderNum: 6,
          //         parentId: 26,
          //         path: "/business",
          //         type: 1,
          //         updateTime: 1595932803000,
          //         url: "/delivery/Business/Index",
          //       },
          //     ],
          //     code: "sys:delivery",
          //     createTime: 1595931249000,
          //     icon: "el-icon-receiving",
          //     id: 26,
          //     isHome: "0",
          //     label: "配送中心",
          //     name: "",
          //     orderNum: 4,
          //     parentId: 0,
          //     path: "/delivery",
          //     remark: "",
          //     type: 0,
          //     updateTime: 1595931249000,
          //     url: "",
          //   },
          //   {
          //     children: [
          //       {
          //         children: [],
          //         code: "sys:log",
          //         createTime: 1598625148000,
          //         icon: "el-icon-s-data",
          //         id: 43,
          //         isHome: "0",
          //         label: "操作日志",
          //         name: "log",
          //         orderNum: 1,
          //         parentId: 40,
          //         path: "/log",
          //         type: 1,
          //         updateTime: 1598625148000,
          //         url: "/system/Log/LogList",
          //       },
          //       {
          //         children: [],
          //         code: "sys:userManage",
          //         createTime: 1595933480000,
          //         icon: "el-icon-s-data",
          //         id: 41,
          //         isHome: "0",
          //         label: "员工管理",
          //         name: "userManage",
          //         orderNum: 1,
          //         parentId: 40,
          //         path: "/userManage",
          //         type: 1,
          //         updateTime: 1595933480000,
          //         url: "/system/User/UserList",
          //       },
          //       {
          //         children: [],
          //         code: "sys:permissionManage",
          //         createTime: 1595933480000,
          //         icon: "el-icon-s-data",
          //         id: 42,
          //         isHome: "0",
          //         label: "角色权限管理",
          //         name: "permissionManage",
          //         orderNum: 1,
          //         parentId: 40,
          //         path: "/permissionManage",
          //         type: 1,
          //         updateTime: 1595933480000,
          //         url: "/system/Role/RoleList",
          //       },
          //     ],
          //     code: "sys:systemManage",
          //     createTime: 1595933348000,
          //     icon: "el-icon-s-data",
          //     id: 40,
          //     isHome: "0",
          //     label: "系统管理",
          //     name: "systemManage",
          //     orderNum: 5,
          //     parentId: 0,
          //     path: "/systemManage",
          //     type: 0,
          //     updateTime: 1595933348000,
          //     url: "",
          //   },
          // ];
          // let routerList1 = [
          //   {
          //     children: [],
          //     code: "sys:operatorDetail",
          //     createTime: 1595928241000,
          //     icon: "el-icon-document",
          //     id: 12,
          //     isHome: "0",
          //     label: "操作员列表",
          //     name: "operatorDetail",
          //     orderNum: 0,
          //     parentId: 11,
          //     path: "/operatorDetail",
          //     type: 1,
          //     updateTime: 1595928241000,
          //     url: "/client/OperatorManage/OperatorDetail",
          //   },
          //   {
          //     children: [],
          //     code: "sys:managerview",
          //     createTime: 1595928241000,
          //     icon: "el-icon-document",
          //     id: 45,
          //     isHome: "0",
          //     label: "操作员详情",
          //     name: "managerview",
          //     orderNum: 0,
          //     parentId: 11,
          //     path: "/managerview",
          //     type: 1,
          //     updateTime: 1595928241000,
          //     url: "/client/OperatorManage/Managerview",
          //   },
          //   {
          //     children: [],
          //     code: "sys:log",
          //     createTime: 1598625148000,
          //     icon: "el-icon-s-data",
          //     id: 43,
          //     isHome: "0",
          //     label: "操作日志",
          //     name: "log",
          //     orderNum: 1,
          //     parentId: 40,
          //     path: "/log",
          //     type: 1,
          //     updateTime: 1598625148000,
          //     url: "/system/Log/LogList",
          //   },
          //   {
          //     children: [],
          //     code: "sys;purchaseStorage",
          //     createTime: 1595930015000,
          //     icon: "el-icon-s-operation",
          //     id: 21,
          //     isHome: "0",
          //     label: "购货入库",
          //     name: "purchaseStorage",
          //     orderNum: 1,
          //     parentId: 20,
          //     path: "/purchaseStorage",
          //     type: 1,
          //     updateTime: 1595930015000,
          //     url: "/warehouse/PurchaseStorage/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:firstClassifyManage",
          //     createTime: 1595931493000,
          //     icon: "el-icon-receiving",
          //     id: 28,
          //     isHome: "0",
          //     label: "一级分类管理",
          //     name: "firstClassifyManage",
          //     orderNum: 1,
          //     parentId: 27,
          //     path: "/firstClassifyManage",
          //     type: 1,
          //     updateTime: 1595931493000,
          //     url: "/delivery/Commodity/FirstClassifyManage",
          //   },
          //   {
          //     children: [],
          //     code: "sys:userManage",
          //     createTime: 1595933480000,
          //     icon: "el-icon-s-data",
          //     id: 41,
          //     isHome: "0",
          //     label: "员工管理",
          //     name: "userManage",
          //     orderNum: 1,
          //     parentId: 40,
          //     path: "/userManage",
          //     type: 1,
          //     updateTime: 1595933480000,
          //     url: "/system/User/UserList",
          //   },
          //   {
          //     children: [],
          //     code: "sys:clientDetail",
          //     createTime: 1595926228000,
          //     icon: "el-icon-document",
          //     id: 3,
          //     isHome: "0",
          //     label: "客户详情",
          //     name: "clientDetail",
          //     orderNum: 1,
          //     parentId: 2,
          //     path: "/clientDetail",
          //     type: 1,
          //     updateTime: 1595926228000,
          //     url: "/client/ClientManage/ClientDetail",
          //   },
          //   {
          //     children: [],
          //     code: "sys:returnSign",
          //     createTime: 1595930281000,
          //     icon: "el-icon-s-operation",
          //     id: 24,
          //     isHome: "0",
          //     label: "退货登记",
          //     name: "returnSign",
          //     orderNum: 1,
          //     parentId: 23,
          //     path: "/returnSign",
          //     type: 1,
          //     updateTime: 1595930281000,
          //     url: "/warehouse/ReturnManage/ReturnSign",
          //   },
          //   {
          //     children: [],
          //     code: "sys:clientList",
          //     createTime: 1595926228000,
          //     icon: "el-icon-document",
          //     id: 44,
          //     isHome: "0",
          //     label: "客户列表",
          //     name: "clientList",
          //     orderNum: 1,
          //     parentId: 2,
          //     path: "/clientList",
          //     type: 1,
          //     updateTime: 1595926228000,
          //     url: "/client/ClientManage/ClientList",
          //   },
          //   {
          //     children: [],
          //     code: "sys:orderDetail",
          //     createTime: 1595927671000,
          //     icon: "el-icon-document",
          //     id: 6,
          //     isHome: "0",
          //     label: "订单详情",
          //     name: "orderDetail",
          //     orderNum: 1,
          //     parentId: 5,
          //     path: "/orderDetail",
          //     type: 1,
          //     updateTime: 1595927671000,
          //     url: "/client/OrderManage/OrderDetail",
          //   },
          //   {
          //     children: [],
          //     code: "sys:permissionManage",
          //     createTime: 1595933480000,
          //     icon: "el-icon-s-data",
          //     id: 42,
          //     isHome: "0",
          //     label: "角色权限管理",
          //     name: "permissionManage",
          //     orderNum: 1,
          //     parentId: 40,
          //     path: "/permissionManage",
          //     type: 1,
          //     updateTime: 1595933480000,
          //     url: "/system/Role/RoleList",
          //   },
          //   {
          //     children: [],
          //     code: "sys:warehouseSetting",
          //     createTime: 1595931933000,
          //     icon: "el-icon-receiving",
          //     id: 32,
          //     isHome: "0",
          //     label: "库房设置",
          //     name: "warehouseSetting",
          //     orderNum: 1,
          //     parentId: 31,
          //     path: "/warehouseSetting",
          //     type: 1,
          //     updateTime: 1595931933000,
          //     url: "/delivery/WarehouseManage/WarehouseSetting",
          //   },
          //   {
          //     children: [],
          //     code: "sys:assignments",
          //     createTime: 1595928861000,
          //     icon: "el-icon-rank",
          //     id: 16,
          //     isHome: "0",
          //     label: "分配送货任务",
          //     name: "assignments",
          //     orderNum: 1,
          //     parentId: 15,
          //     path: "/assignments",
          //     type: 1,
          //     updateTime: 1595928861000,
          //     url: "/scheduling/DeliveryManage/Assignments",
          //   },
          //   {
          //     children: [],
          //     code: "sys:schedulingManage",
          //     createTime: 1595928677000,
          //     icon: "el-icon-rank",
          //     id: 14,
          //     isHome: "0",
          //     label: "调度管理",
          //     name: "schedulingManage",
          //     orderNum: 1,
          //     parentId: 13,
          //     path: "/schedulingManage",
          //     type: 1,
          //     updateTime: 1595928677000,
          //     url: "/scheduling/SchedulingManage/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:inventory",
          //     createTime: 1595932040000,
          //     icon: "el-icon-receiving",
          //     id: 33,
          //     isHome: "0",
          //     label: "库存量查询",
          //     name: "inventory",
          //     orderNum: 2,
          //     parentId: 31,
          //     path: "/inventory",
          //     type: 1,
          //     updateTime: 1595932040000,
          //     url: "/delivery/WarehouseManage/Inventory",
          //   },
          //   {
          //     children: [],
          //     code: "sys:signReceipt",
          //     createTime: 1595928939000,
          //     icon: "el-icon-rank",
          //     id: 17,
          //     isHome: "0",
          //     label: "补打签收单",
          //     name: "signReceipt",
          //     orderNum: 2,
          //     parentId: 15,
          //     path: "/signReceipt",
          //     type: 1,
          //     updateTime: 1595928939000,
          //     url: "/scheduling/DeliveryManage/SignReceipt",
          //   },
          //   {
          //     children: [],
          //     code: "sys:pickUpManage",
          //     createTime: 1595930104000,
          //     icon: "el-icon-s-operation",
          //     id: 22,
          //     isHome: "0",
          //     label: "领货管理",
          //     name: "pickUpManage",
          //     orderNum: 2,
          //     parentId: 20,
          //     path: "/pickUpManage",
          //     type: 1,
          //     updateTime: 1595930104000,
          //     url: "/warehouse/PickUpManage/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:secondClassifyManage",
          //     createTime: 1595931527000,
          //     icon: "el-icon-receiving",
          //     id: 29,
          //     isHome: "0",
          //     label: "二级分类管理",
          //     name: "secondClassifyManage",
          //     orderNum: 2,
          //     parentId: 27,
          //     path: "/secondClassifyManage",
          //     type: 1,
          //     updateTime: 1595931527000,
          //     url: "/delivery/Commodity/SecondClassifyManage",
          //   },
          //   {
          //     children: [],
          //     code: "sys:clientAdd",
          //     createTime: 1595927478000,
          //     icon: "el-icon-document",
          //     id: 4,
          //     isHome: "0",
          //     label: "添加用户",
          //     name: "clinetAdd",
          //     orderNum: 2,
          //     parentId: 2,
          //     path: "/clientAdd",
          //     type: 1,
          //     updateTime: 1595927478000,
          //     url: "/client/ClientManage/ClientAdd",
          //   },
          //   {
          //     children: [],
          //     code: "sys:returnOutOfStock",
          //     createTime: 1595930415000,
          //     icon: "el-icon-s-operation",
          //     id: 25,
          //     isHome: "0",
          //     label: "退货出库",
          //     name: "returnOutOfStock",
          //     orderNum: 2,
          //     parentId: 23,
          //     path: "/returnOutOfStock",
          //     type: 1,
          //     updateTime: 1595930415000,
          //     url: "/warehouse/ReturnManage/ReturnOutOfStock",
          //   },
          //   {
          //     children: [],
          //     code: "sys:orderAdd",
          //     createTime: 1595927745000,
          //     icon: "el-icon-document",
          //     id: 7,
          //     isHome: "0",
          //     label: "添加订单",
          //     name: "orderAdd",
          //     orderNum: 2,
          //     parentId: 5,
          //     path: "/orderAdd",
          //     type: 1,
          //     updateTime: 1595927745000,
          //     url: "/client/OrderManage/OrderAdd",
          //   },
          //   {
          //     children: [],
          //     code: "sys:warehouseInventorySetting",
          //     createTime: 1595932165000,
          //     icon: "el-icon-receiving",
          //     id: 34,
          //     isHome: "0",
          //     label: "库房储备设置",
          //     name: "warehouseInventorySetting",
          //     orderNum: 3,
          //     parentId: 31,
          //     path: "/warehouseInventorySetting",
          //     type: 1,
          //     updateTime: 1595932165000,
          //     url: "/delivery/WarehouseManage/WarehouseInventorySetting",
          //   },
          //   {
          //     children: [],
          //     code: "sys:orderDelete",
          //     createTime: 1595927829000,
          //     icon: "el-icon-document",
          //     id: 8,
          //     isHome: "0",
          //     label: "撤销订单",
          //     name: "orderDelete",
          //     orderNum: 3,
          //     parentId: 5,
          //     path: "/orderDelete",
          //     type: 1,
          //     updateTime: 1595927829000,
          //     url: "/client/OrderManage/OrderDelete",
          //   },
          //   {
          //     children: [],
          //     code: "sys:receiptEntry",
          //     createTime: 1595929034000,
          //     icon: "el-icon-rank",
          //     id: 18,
          //     isHome: "0",
          //     label: "回执录入",
          //     name: "receiptEntry",
          //     orderNum: 3,
          //     parentId: 15,
          //     path: "/receiptEntry",
          //     type: 1,
          //     updateTime: 1595929034000,
          //     url: "/scheduling/DeliveryManage/ReceiptEntry",
          //   },
          //   {
          //     children: [],
          //     code: "sys:commodityManage",
          //     createTime: 1595931664000,
          //     icon: "el-icon-receiving",
          //     id: 30,
          //     isHome: "0",
          //     label: "商品管理",
          //     name: "commodityManage",
          //     orderNum: 3,
          //     parentId: 27,
          //     path: "/commodityManage",
          //     type: 1,
          //     updateTime: 1595931664000,
          //     url: "/delivery/Commodity/CommodityManage",
          //   },
          //   {
          //     children: [],
          //     code: "sys:supplier",
          //     createTime: 1595932342000,
          //     icon: "el-icon-receiving",
          //     id: 36,
          //     isHome: "0",
          //     label: "供应商管理",
          //     name: "supplier",
          //     orderNum: 3,
          //     parentId: 26,
          //     path: "/supplier",
          //     type: 1,
          //     updateTime: 1595932342000,
          //     url: "/delivery/Supplier/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:payment",
          //     createTime: 1595929130000,
          //     icon: "el-icon-rank",
          //     id: 19,
          //     isHome: "0",
          //     label: "缴款查询",
          //     name: "payment",
          //     orderNum: 4,
          //     parentId: 15,
          //     path: "/payment",
          //     type: 1,
          //     updateTime: 1595929130000,
          //     url: "/scheduling/DeliveryManage/Payment",
          //   },
          //   {
          //     children: [],
          //     code: "sys:purchaseManage",
          //     createTime: 1595932453000,
          //     icon: "el-icon-receiving",
          //     id: 37,
          //     isHome: "0",
          //     label: "进货",
          //     name: "purchase",
          //     orderNum: 4,
          //     parentId: 26,
          //     path: "/purchase",
          //     type: 1,
          //     updateTime: 1595932453000,
          //     url: "/delivery/Purchase/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:accessOrder",
          //     createTime: 1595932249000,
          //     icon: "el-icon-receiving",
          //     id: 35,
          //     isHome: "0",
          //     label: "出入单查询",
          //     name: "accessOrder",
          //     orderNum: 4,
          //     parentId: 31,
          //     path: "/accessOrder",
          //     type: 1,
          //     updateTime: 1595932249000,
          //     url: "/delivery/WarehouseManage/AccessOrder",
          //   },
          //   {
          //     children: [],
          //     code: "sys:orderExchange",
          //     createTime: 1595927917000,
          //     icon: "el-icon-document",
          //     id: 9,
          //     isHome: "0",
          //     label: "换货订单",
          //     name: "orderExchange",
          //     orderNum: 4,
          //     parentId: 5,
          //     path: "/orderExchange",
          //     type: 1,
          //     updateTime: 1595927917000,
          //     url: "/client/OrderManage/OrderExchange",
          //   },
          //   {
          //     children: [],
          //     code: "sys:orderUpdate",
          //     createTime: 1595927962000,
          //     icon: "el-icon-document",
          //     id: 10,
          //     isHome: "0",
          //     label: "退货订单",
          //     name: "orderUpdate",
          //     orderNum: 5,
          //     parentId: 5,
          //     path: "/orderUpdate",
          //     type: 1,
          //     updateTime: 1595927962000,
          //     url: "/client/OrderManage/OrderUpdate",
          //   },
          //   {
          //     children: [],
          //     code: "sys:return",
          //     createTime: 1595932560000,
          //     icon: "el-icon-receiving",
          //     id: 38,
          //     isHome: "0",
          //     label: "退货",
          //     name: "return",
          //     orderNum: 5,
          //     parentId: 26,
          //     path: "/return",
          //     type: 1,
          //     updateTime: 1595932560000,
          //     url: "/delivery/Return/Index",
          //   },
          //   {
          //     children: [],
          //     code: "sys:business",
          //     createTime: 1595932803000,
          //     icon: "el-icon-receiving",
          //     id: 39,
          //     isHome: "0",
          //     label: "业务管理",
          //     name: "business",
          //     orderNum: 6,
          //     parentId: 26,
          //     path: "/business",
          //     type: 1,
          //     updateTime: 1595932803000,
          //     url: "/delivery/Business/Index",
          //   },
          // ];
          // let auths1 = [
          //   "sys:operatorDetail",
          //   "sys:commodity",
          //   "sys:clientManage",
          //   "sys:warehouseSetting",
          //   "sys:assignments",
          //   "sys:userManage",
          //   "sys:schedulingManage",
          //   "sys;purchaseStorage",
          //   "sys:firstClassifyManage",
          //   "sys:clientDetail",
          //   "sys:client",
          //   "sys:returnSign",
          //   "sys:permissionManage",
          //   "sys:orderDetail",
          //   "sys:clientAdd",
          //   "sys:returnOutOfStock",
          //   "sys:orderAdd",
          //   "sys:orderManage",
          //   "sys:inventory",
          //   "sys:signReceipt",
          //   "sys:deliveryManage",
          //   "sys:warehouseManage",
          //   "sys:pickUpManage",
          //   "sys:secondClassifyManage",
          //   "sys:scheduling",
          //   "sys:warehouse",
          //   "sys:operatorManage",
          //   "sys:receiptEntry",
          //   "sys:supplier",
          //   "sys:warehouseInventorySetting",
          //   "sys:returnManage",
          //   "sys:commodityManage",
          //   "sys:orderDelete",
          //   "sys:orderExchange",
          //   "sys:payment",
          //   "sys:purchaseManage",
          //   "sys:delivery",
          //   "sys:accessOrder",
          //   "sys:return",
          //   "sys:orderUpdate",
          //   "sys:systemManage",
          //   "sys:business",
          // ];
          //角色名称
          let roleName = res.data.roleName;
          // let roleName = "张跃";

          //在sessionStore里面保存菜单数据和路由数据
          //保存菜单数据
          sessionStorage.setItem("token", token);
          sessionStorage.setItem("roleName", roleName);
          sessionStorage.setItem("auths", JSON.stringify(auths));
          sessionStorage.setItem("menuList", JSON.stringify(menuList));
          //缓存设置登录用户的id
          sessionStorage.setItem("userId", userId);
          //保存路由数据
          sessionStorage.setItem("routerList", JSON.stringify(routerList));
          //动态生成路由
          this.$store.commit("getMenuList", this.$router);
          //跳转到home页面
          this.$router.push("/home");
          // window.location.href = "/home";
        }
      });
    },
    //获取验证码
    async getImage() {
      let { data: res } = await this.$http.get("/api/user/image");
      console.log(res);
      // this.imgSrc = res.img;
      let resp =
        // "http://120.25.157.203:8083/api/user/image?t=" + new Date().getTime();
        // "http://120.25.157.203:8083/api/user/image" ;
        "http://localhost:8083/api/user/image?t=" + new Date().getTime();

      // "http://localhost:8083/api/user/image" ;

      this.imgSrc = resp;
    },
    //重复动画
    drawFrame() {
        // let animation = requestAnimationFrame(this.drawFrame);
      this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
      this.createStar(false);
      this.stars.forEach(this.moveStar);
    },
    //展示所有的星星
    createStar(params) {
      let now = new Date();
      if (params) {
        //初始化星星
        for (var i = 0; i < 50; i++) {
          const radius = Math.random() * 3 + 2;
          let star = new this.Ball(radius);
          star.x = Math.random() * this.canvas.width + 1;
          star.y = Math.random() * this.canvas.height + 1;
          star.color = "#ffffff";
          star.shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
          star.direction = this.directionList[
            Math.floor(Math.random() * this.directionList.length)
          ];
          this.stars.push(star);
        }
      } else if (!params && now - this.last_star_created_time > 3000) {
        //每隔3秒重绘修改颜色其中30个球阴影颜色
        for (let i = 0; i < 30; i++) {
          this.stars[i].shadowColor = this.shadowColorList[
            Math.floor(Math.random() * this.shadowColorList.length)
          ];
        }
        this.last_star_created_time = now;
      }
    },
    //移动
    moveStar(star) {
      if (star.y - this.canvas.height > 0) {
        //触底
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftTop";
        } else {
          star.direction = "rightTop";
        }
      } else if (star.y < 2) {
        //触顶
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightBottom";
        } else {
          star.direction = "leftBottom";
        }
      } else if (star.x < 2) {
        //左边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "rightTop";
        } else {
          star.direction = "rightBottom";
        }
      } else if (star.x - this.canvas.width > 0) {
        //右边
        if (Math.floor(Math.random() * 2) === 1) {
          star.direction = "leftBottom";
        } else {
          star.direction = "leftTop";
        }
      }
      if (star.direction === "leftTop") {
        star.y -= star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightBottom") {
        star.y += star.radius / this.speed;
        star.x += star.radius / this.speed;
      } else if (star.direction === "leftBottom") {
        star.y += star.radius / this.speed;
        star.x -= star.radius / this.speed;
      } else if (star.direction === "rightTop") {
        star.y -= star.radius / this.speed;
        star.x += star.radius / this.speed;
      }
      star.draw(this.context);
    },
    //显示密码
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      // console.log(this.identifyCode);
    },
    changeCode() {
      this.refreshCode();
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
  },
  mounted() {
    this.canvas = document.getElementById("myCanvas");
    this.context = this.canvas.getContext("2d");

    this.createStar(true);
    this.drawFrame();

    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
};
</script>

<style lang='less' scoped>
.logo_DIv {
  text-align: center;
  width: 100%;
  top: -100px;
  position: relative;
  // border: 1px solid red;
  // padding-top: -10px;
  // padding-bottom: 200px;
  // border: 1px solid green;

  // padding-top: -300px;
  // height: 100%;
}
.show-pwd {
  // position: absolute;
  border: none;
  // right: 10px;
  // top: 7px;
  font-size: 16px;
  // color: $dark_gray;
  background-color: transparent;
  cursor: pointer;
  user-select: none;
}
.codeImg {
  width: 100%;
  cursor: pointer;
}
#login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left top;
  background-color: #242645;
  color: #fff;
  font-family: "Source Sans Pro";
  background-size: 100%;
  background-image: url("http://www.jq22.com/demo/jQueryLogin201708272212/img/Starry.jpg");
  position: relative;
  #bgd {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
    #myCanvas {
      position: absolute;

      left: 0;
      top: 0;
    }
  }
  #loginBox {
    // border:1px solid red;
    width: 240px;
    height: 280px;
    position: absolute;
    text-align: center;
    // margin-top: 10;
    top: 34%;
    left: 40%;
    right: 0;
    // bottom: 0;
    // margin: auto;
    // text-align: center;
    // padding: 20px 40px 40px 40px;
    padding: 8px 40px 64px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 0.8;
    background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
    );
    /deep/ .inps input {
      border: none;
      color: #fff;
      // background-color: transparent;
      background-color: #242645;

      font-size: 12px;
    }
    .submitBtn {
      background-color: transparent;
      color: #39f;
      //   width: 200px;
    }
    .iconfont {
      color: #fff;
    }
    .my-button {
      width: 100%;
    }
    .logoLogo {
      text-align: center;
      // margin-left: 30%;
      // padding-top: 30%;
    }
  }
}
</style>